
// 1.引入用来发送请求的方法，一定要补全路径
import { request } from "../../request/request.js"
/**
 * 1.点击“+”按钮，触发tap点击事件
 *   1）调用小程序内置的选择图片的 api
 *   2）获取到图片路径数组
 *   3）把图片路径存到data的变量中
 *   4）页面就可以根据图片数组，进行循环显示，自定义组件
 * 2.点击自定义图片组件
 *   1）获取被点击的元素的索引
 *   2）获取data中的图片数组
 *   3）根据索引数组中删除对应的元素
 *   4）把数组重新设置回data中
 * 3.点击“提交”
 *   1）获取文本域的内容，类似输入框的获取
 *     .data中定义变量，表示输入框内容
 *     .文本域绑定输入事件，事件触发的时候，把输入框的值，存入到变量中
 *   2）对这些内容，合法性验证
 *   3）验证通过，用户选中的图片，上传到专门的图片服务器，返回图片外网的链接
 *     .遍历图片数组
 *     .挨个上传
 *     .自己再维护图片数组，存放图片上传后的外网链接
 *   4）文本域和外网的图片的路径一起提交到服务器
 *   5）清空当前页面
 *   6）返回上一页
 */

Page({
  data: {
    tabs: [
      {
        id: 0,
        value: "体验问题",
        isActive: true
      },
      {
        id: 1,
        value: "商品、商家投诉",
        isActive: false
      }
    ],
    chooseImgs: [], // 选中的图片路径数组
    textValue: "" // 输入框文本
  },
  // 外网图片的路径数组
  UpLoadImgs: [],
  // 根据标题索引来激活选中，标题数组
  changeTitleByIndex(index) {
    // 2.修改源数组
    let { tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    // 3.赋值到data中
    this.setData({
      tabs
    })
  },
  // 标题点击事件，从子组件传递过来
  handleTabsItemChange(e) {
    //console.log(e);
    // 1.获取被点击的标题索引
    const { index } = e.detail;
    this.changeTitleByIndex(index)
    // 2.重新发送请求 type = 1 index = 0
    this.getOrders(index + 1)
  },
  // 按钮点击上传
  handleChooseImg() {
    // 调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片数量
      count: 9,
      // 图片格式 原图 压缩
      sizeType: ['original', 'compressed'],
      // 图片来源 相册 照相机
      sourceType: ['album', 'camera'],
      success: (res) => {
        this.setData({
          // 图片数组 进行拼接
          chooseImgs: [...this.data.chooseImgs, ...res.tempFilePaths]
          //chooseImgs:res.tempFilePaths
        })
        // console.log(res)
      }
    })
  },
  // 点击自定义图片组件
  handleRemoveImg(e) {
    // 获取被点击组件的索引
    const { index } = e.currentTarget.dataset
    //console.log(index)
    // 获取data中的图片数组
    let { chooseImgs } = this.data
    // 删除元素
    chooseImgs.splice(index, 1)
    // 重新赋值
    this.setData({
      chooseImgs
    })
  },
  // 文本域的输入事件
  handleTextInput(e) {
    this.setData({
      textValue: e.detail.value
    })
  },
  // 按钮提交事件
  handleFormSubmit() {
    // 1.获取文本域内容，图片数组
    const { textValue, chooseImgs } = this.data
    // 2.合法性的验证
    if(!textValue.trim()) {
      // 不合法，弹窗提示，同时return不往下执行
      wx.showToast({
        title: '输入错误，请重新输入',
        icon: 'none',
        mask: true
      })
      return
    }
    // 3.准备上传图片到专门的服务器
    //   .上传文件的api不支持多个文件同时上传，遍历数组，挨个上传
    // 提示正在上传中
    wx.showLoading({
      title: '正在上传中',
      mask: true
    })
    // 判断有没有需要上传的图片数组
    if (chooseImgs.length != 0) {
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          // url: 'https://images.ac.cn/Home/Index/UploadAction/', // 图片要上传到哪里
          url: 'http://img.coolcr.cn/api/upload',
          filePath: v, // 被上传的文件路径
          name: 'image', // 上传文件的名称，后台需要通过name获取文件,file
          formData: {}, // 顺带的文本信息
          success: (result) => {
            // console.log(result)
            let url = JSON.parse(result.data).url
            this.UpLoadImgs.push(url)
            // console.log(this.UpLoadImgs)
            // 所有图片都上传完毕了才触发
            if (i === chooseImgs.length - 1) {
              // 关闭弹窗提示
              wx.hideLoading()
              // 提交到后台
              console.log("把文本的内容和外网图片数组，提交到后台中")
              // 提交成功，重置页面
              this.setData({
                textValue: "",
                chooseImgs: []
              })
              // 成功之后，返回上一页
              wx.navigateBack({
                delta: 1
              })
            }
          }
        })
      })
    } else {
      wx.hideLoading()
      console.log("只是提交了文本内容")
      wx.navigateBack({
        delta: 1
      })
    }
  }
})
